<template>
  <div class="hero-add-container">
    <el-form label-position="left" inline class="demo-table-expand">
      <el-form-item label="背景贴图">
        <ossUpload :imageUrl="src ? domain + src : ''" :imgName="randomName" @upload-img="handler"></ossUpload>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="name" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="英文名">
        <el-input v-model="alis" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="座右铭">
        <el-input v-model="motto" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="饱食">
        <el-input v-model="hungry" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="血量">
        <el-input v-model="hp" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="精神">
        <el-input v-model="san" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="空手伤害">
        <el-input v-model="damage" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item prop="extraLink" label="额外链接">
        <ExtraCompositionItem :selectedArr.sync="extraLink" :mid="$route.query.mid" :module="module" />
      </el-form-item>
    </el-form>
    <mavon-editor v-model="introduce" @imgAdd="imgUpload" class="editor-sty" :boxShadow="false" ref="md"></mavon-editor>
    <el-button type="danger" @click="addHero" :loading="loading" style="margin-top: 16px">确定</el-button>
  </div>
</template>

<script>
  import OSS from "ali-oss";
  import md5 from "md5-js";
  import ossUpload from "@/components/ossUpload.vue";
  import ExtraCompositionItem from "@/components/ExtraCompositionItem.vue";
  export default {
    name: "heroAdd",
    data() {
      return {
        src: "",
        name: "",
        alis: "",
        motto: "",
        hungry: "",
        hp: "",
        san: "",
        damage: "",
        loading: false,
        introduce: "",
        extraLink: [],
        module: ["materials", "foods", "anims", "natures", "heros"]
      };
    },
    components: {
      ossUpload,
      ExtraCompositionItem
    },
    computed: {
      randomName() {
        let time = new Date();
        return md5(time);
      },
    },
    methods: {
      /**
       * 图片上传
       */
      imgUpload(filename, $file) {
        // oss配置
        const client = new OSS({
          endpoint: "oss-cn-beijing.aliyuncs.com",
          accessKeyId: "LTAI4FgrsFXo8ij335BxeRbp",
          accessKeySecret: "oG0PWkV0qOeDoJQfwEHOqIvTp16S0x",
          bucket: "stavebox",
        });
        // 图片路径拼接，dirName其实就是定义存在oss的哪个虚拟文件夹下的
        let time = new Date();
        let hash = md5(time);
        let imgType = $file.type.split("/")[1];
        let hashName = "Article/" + hash + "." + imgType;
        // 将文件流上传至oss
        client
          .put(hashName, $file)
          .then((res) => {
            let imgUrl = "http://img.fireleaves.cn/" + res.name;
            this.$refs.md.$img2Url(filename, imgUrl);
          })
          .catch((err) => {
            console.log(err);
          });
      },
      handler(src) {
        this.src = src;
      },
      addHero() {
        let _extraLink = this.transformSumbitDataList(this.extraLink)
        this.axios
          .post("/hero/add", {
            version: this.$store.state.version,
            src: this.src,
            name: this.name,
            alis: this.alis,
            damage: this.damage,
            hungry: this.hungry,
            hp: this.hp,
            san: this.san,
            motto: this.motto,
            introduce: this.introduce,
            mid: this.$route.query.mid,
            extraLink: _extraLink
          })
          .then((res) => {
            if (res.data.code !== 0) {
              this.$message.error(res.data.message);
            } else {
              this.$message.success('录入成功')
              this.$router.go(-1);
            }
          });
      },
    },
  };
</script>

<style lang="scss">
  .hero-add-container {
    .demo-table-expand {
      font-size: 0;
    }

    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 16px;
      width: 50%;
    }

    .composition-sty .el-input__inner {
      width: 160px;
    }
  }
</style>

<style lang="scss" scoped>
  .hero-add-container {
    padding: 16px;
  }
</style>